<template>
	<view class="u-p-20">
		<u-form :model="form" ref="uForm" label-width='160'>
			<u-form-item label="" prop="name" required>
				<u-input v-model="form.name" placeholder='请输入姓名' />
			</u-form-item>
			<u-form-item label="" prop="mobile" required>
				<u-input v-model="form.mobile" placeholder='请输入电话' />
			</u-form-item>
			<u-form-item label="" prop="email">
				<u-input v-model="form.email" placeholder='请输入邮箱' />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.sexName" placeholder='请选择性别' type="select" @click="select(1)" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.areaName" type="select" placeholder='请选择小区' @click="selectCommunity" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.buildingName" type="select" placeholder='请选择楼号' @click="select(2)" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.unitName" type="select" placeholder='请选择单元' @click="select(3)" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.houseName" type="select" placeholder='请选择房间' @click="select(4)" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.birthdayDate" type="select" placeholder='请选择出生日期' @click="selectBirthday" />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.address" placeholder='请输入详细地址' />
			</u-form-item>
			<u-form-item label="" prop="">
				<u-input v-model="form.userTypeName" type="select" placeholder='请选择业主身份' @click="select(5)" />
			</u-form-item>
		</u-form>
		<u-button type='primary' plain @click="submit" :loading='loading'>提交</u-button>
		<city-select v-model="value" @city-change="cityChange"></city-select>
		<u-picker mode="selector" v-model="show" :range="selector" :range-key='rangeKey' @confirm='confirm'></u-picker>
		<u-picker mode="time" v-model="birth" start-year='1900' :end-year='endTime' @confirm='confirmBrith'></u-picker>
	</view>
</template>

<script>
	import {
		getBuildByArea,
		getUnitByBuild,
		getByMobile,
		appOwnersave,
		getDictListByType,
		getHouseByUnit
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				loading: false,
				show: false,
				birth: false,
				endTime: '',
				value: false,
				selector: [1, 2, 3],
				selectNum: 0,
				rangeKey: '',
				sexSelector: [],
				userTypeSelector: [],
				form: {
					name: '',
					mobile: '',
					email:''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.endTime = this.$u.timeFormat(new Date(), 'yyyy');
		},
		watch: {
			'form.email'(newValue) {
				if(newValue.trim()!=''){
					this.rules={
						...this.rules,
						email:[
							{
								// 自定义验证函数，见上说明
								validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// this.$u.test.mobile()就是返回true或者false的
									return this.$u.test.email(value);
								},
								message: '邮箱不正确',
								// 触发器可以同时用blur和change
								trigger: ['change', 'blur'],
							}
						]
					}
				}else{
					delete this.rules.email
				}
				this.$refs.uForm.setRules(this.rules);
			}
		},
		onLoad() {
			this.form = {
				name: this.userInfo.name,
				mobile: this.userInfo.mobile,
				email: this.userInfo.email || '',
				birthdayDate: this.userInfo.birthday || '',
				address: this.userInfo.address || '',
				sex: this.userInfo.sex || '',
				userType: this.userInfo.userType || ''
			}
			if (this.userInfo.house && this.userInfo.house.id) {
				getHouseByUnit({
					unitId: this.userInfo.unit.id
				}).then(res => {
					res.map(item => {
						if (item.id == this.userInfo.house.id) {
							this.form = {
								...this.form,
								houseName: item.no,
								houseId: item.id
							}
						}
					})
				})
			}
			if (this.userInfo.unit && this.userInfo.unit.id) {
				getUnitByBuild({
					building: this.userInfo.building.id
				}).then(res => {
					res.map(item => {
						if (item.id == this.userInfo.unit.id) {
							this.form = {
								...this.form,
								unitName: item.name,
								unitId: item.id
							}
						}
					})
				})
			}
			if (this.userInfo.area && this.userInfo.area.id) {
				getBuildByArea({
					areaId: this.userInfo.area.id
				}).then(res => {
					res.map(item => {
						this.form = {
							...this.form,
							areaName: item.area.name,
							areaId: item.area.id
						}
						if(this.userInfo.building && this.userInfo.building.id){
							if (item.id == this.userInfo.building.id) {
								this.form = {
									...this.form,
									buildingName: item.name,
									buildingId: item.id,
								}
							}
						}
					})
				})
			}
			getDictListByType({
				type: 'sex'
			}).then(res => {
				this.sexSelector = res
				if (this.userInfo.sex) {
					this.sexSelector.map(item => {
						if (item.value == this.userInfo.sex) {
							this.form = {
								...this.form,
								sexName: item.label,
							}
						}
					})
				}
			})
			getDictListByType({
				type: 'userType'
			}).then(res => {
				this.userTypeSelector = res
				if (this.userInfo.userType) {
					this.userTypeSelector.map(item => {
						if (item.value == this.userInfo.userType) {
							this.form = {
								...this.form,
								userTypeName: item.label,
							}
						}
					})
				}
			})
		},
		methods: {
			confirmBrith(e) {
				this.form = {
					...this.form,
					birthdayDate: e.year + '-' + e.month + '-' + e.day
				}
			},
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.loading = true
							appOwnersave(this.form).then(res => {
								this.loading = false
								this.$u.toast('提交成功')
								getByMobile({
									mobile: this.form.mobile
								}).then(res => {
									uni.setStorageSync('ownerId', res.id)
									this.$store.commit('setUserInfo', res)
									setTimeout(() => {
										this.$u.route({
											type: 'back'
										})
									}, 800)
								})
							}).catch(err => {
								this.loading = false
							})
						} else {
							console.log('验证失败');
						}
					})
				)
			},
			confirm(e) {
				switch (this.selectNum) {
					case 1:
						this.form = {
							...this.form,
							sexName: this.selector[e[0]].label,
							sex: this.selector[e[0]].value
						}
						break;
					case 2:
						this.form = {
							...this.form,
							buildingName: this.selector[e[0]].name,
							buildingId: this.selector[e[0]].id,
							unitName:'',
							unitId:'',
							houseName:'',
							houseId:''
						}
						break;
					case 3:
						this.form = {
							...this.form,
							unitName: this.selector[e[0]].name,
							unitId: this.selector[e[0]].id,
							houseName:'',
							houseId:''
						}
						break;
					case 4:
						this.form = {
							...this.form,
							houseName: this.selector[e[0]].no,
							houseId: this.selector[e[0]].id
						}
						break;
					case 5:
						this.form = {
							...this.form,
							userTypeName: this.selector[e[0]].label,
							userType: this.selector[e[0]].value
						}
						break;
					default:
						break;
				}
			},
			select(num) {
				this.selectNum = num
				switch (num) {
					case 1:
						this.rangeKey = 'label'
						this.selector = this.sexSelector
						break;
					case 2:
						if (!this.form.areaId) {
							uni.showToast({
								title: '请先选择小区',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'name'
						getBuildByArea({
							areaId: this.form.areaId
						}).then(res => {
							this.selector = res
						})
						break;
					case 3:
						if (!this.form.buildingId) {
							uni.showToast({
								title: '请先选择楼号',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'name'
						getUnitByBuild({
							buildingId: this.form.buildingId
						}).then(res => {
							this.selector = res
						})
						break;
					case 4:
						if (!this.form.unitId) {
							uni.showToast({
								title: '请先选择单元',
								icon: 'none'
							})
							return
						}
						this.rangeKey = 'no'
						getHouseByUnit({
							unitId: this.form.unitId
						}).then(res => {
							this.selector = res
						})
						break;
					case 5:
						this.rangeKey = 'label'
						this.selector = this.userTypeSelector
						break;
					default:
						break;
				}
				this.show = true
			},
			selectBirthday() {
				this.birth = true
			},
			selectCommunity() {
				this.value = true
			},
			cityChange(e) {
				this.form = {
					...this.form,
					areaName:e.name,
					areaId: e.id,
					buildingName: '',
					buildingId: '',
					unitName:'',
					unitId:'',
					houseName:'',
					houseId:''
				}
			}
		}
	}
</script>

<style>

</style>
